<!-- @format -->

<template>
  <div>
    <p>{{ count }}</p>
    <!-- 1. 少量代码(一句代码) -->
    <button v-on:click="count++">+1</button>
    <!-- <button v-on:click="++count">+1</button> -->

    <!-- 2. 执行不带参数的函数，函数名推荐不加括号 -->
    <!-- 2.1 推荐的写法 -->
    <button v-on:click="add1">+2</button>
    <!-- 2.2 不推荐的写法 -->
    <button v-on:click="add1()">+2</button>

    <!-- 3. 执行带参数的函数，函数名必须加括号，传入实参 -->
    <button v-on:click="addN(3)">+n</button>
    <button v-on:click="addN(5)">+n</button>

    <!-- 4. v-on用的多，类似v-bind，二者都可以简写，推荐简写-->
    <!-- 4.1 v-bind: 简写成 :   -->
    <!-- 4.2 v-on: 简写成 @   -->
    <button @click="addN(10)">+n</button>
  </div>
</template>

<script>
  export default {
    // data是声明数据的地方
    data() {
      return {
        count: 0
      }
    },
    // methods是声明函数/方法的地方
    methods: {
      add1() {
        // 注意：
        // 1. 在Vue2中，经常会在方法中通过this访问data中的数据或调用methods中其他方法
        // 2. this就是当前组件(vue)实例，data中声明的数据或methods中声明的方法都会成为this的属性
        // console.log(this)
        this.count += 2 // 等同于 this.count = this.count + 2
      },
      addN(n) {
        this.count += n
      }
    }
  }
</script>

<style></style>
